<template>
    <div class="m-padding-tb-big" id="app">
        <!-- 创建中间容器 防止左右铺满 -->
        <div class="ui container">
            <!-- 使用布局 左右 11 5 -->
            <div class="ui stackable grid">
                <!-- 左侧布局 左 11 -->
                <div class="eleven wide column">
                    <!-- 创建分段 首部分段 -->
                    <Bar title="博客" count="14"/>

                    <!-- 创建中间内容分段 -->
                    <div class="ui attached segment" style="padding:0.5em 2em !important;" v-for="(article, index) in articles" :key="index" >
                        <!-- 一个文章模块 -->
                        <Article
                            :title="article.title"
                            :author="article.author"
                            :introduce="article.introduce"
                            :src="article.src"
                            :tags="article.tags"
                            :times="article.times"
                            :views="article.views"
                            size='small'/>
                    </div>

                    <!-- 创建底部分段 两个按钮 上一页与下一页-->
                    <div class="ui bottom attached segment">
                        <div class="ui two column grid">
                            <div class="column">
                                <a href="#" class="ui teal mini basic button">上一页</a>
                            </div>
                            <div class="column right aligned">
                                <a href="#" class="ui teal mini basic button">下一页</a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 右侧布局 右 5 -->
                <div class="five wide column attached">
                    <!-- 最新文章 -->
                    <div class="ui segments">
                        <div class="ui secondary attached segment">
                            <div class="ui two column grid">
                                <div class="column m-padding-tb-0-8em">
                                    <i class="bookmark teal icon"></i>最新推荐
                                </div>
                                <div class="column right aligned m-padding-tb-0-8em">
                                    <a href="#" target="_blank">
                                        more
                                        <i class="angle double right icon"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <!-- 此div无实际作用，用于添加teal颜色的线 -->
                        <div class="ui teal segment" style="padding: 0"></div>
                        <div
                                class="ui segment m-padding-tb-0-8em"
                                v-for="(title, index) in new_title"
                                :key="index"
                        >
                            <a href="#" target="_blank" class="m-text-color-blank">{{ title.news_name }}</a>
                        </div>
                    </div>

                    <!-- 文章标签 -->
                    <div class="ui segments m-margin-tb-2-em">
                        <div class="ui secondary attached segment">
                            <div class="ui two column grid">
                                <div class="column m-padding-tb-0-8em">
                                    <i class="tags teal icon"></i>标签
                                </div>
                                <div class="column right aligned m-padding-tb-0-8em">
                                    <a href="#" target="_blank">
                                        more
                                        <i class="angle double right icon"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="ui teal attached segment">
                            <a
                                    href="#"
                                    target="_blank"
                                    class="ui teal basic left pointing label m-margin-tb-small"
                                    v-for="(tag, index) in tags"
                                    :key="index"
                            >
                                {{ tag.tags_name }}
                                <div class="detail">{{ tag.tags_number }}</div>
                            </a>
                        </div>
                    </div>

                    <!-- 文章分类 -->
                    <div class="ui segments">
                        <div class="ui secondary attached segment">
                            <div class="ui two column grid">
                                <div class="column m-padding-tb-0-8em">
                                    <i class="idea teal icon"></i>分类
                                </div>
                                <div class="column right aligned m-padding-tb-0-8em">
                                    <a href="#" target="_blank">
                                        more
                                        <i class="angle double right icon"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="ui teal attached segment">
                            <div class="ui fluid vertical menu">
                                <a href="#" class="item" v-for="(item, index) in types" :key="index">
                                    {{ item.title }}
                                    <div class="ui teal basic teal left pointing label">{{ item.number }}</div>
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 二维码 -->
                    <h4 class="ui horizontal divider header m-opacity-mini m-margin-tb-2-em">扫码关注我</h4>
                    <div class="ui card aligned centered" style="width: 150px !important;">
                        <img src="../assets/image/微信二维码.jpg" alt="_blank" class="ui rounded image" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Article from "../components/Article";
    import Bar from "../components/Bar";
    export default {
        name: "index",
        data() {
            return {
                articles: [
                    // 文章信息数据
                    {
                        title: "SpringBoot日志处理之Logback",
                        introduce:
                            "日志处理是一个正式项目必备的功能，日志要能够根据时间、类型等要素，根据指定格式来保存指定的日志，方便我们观察程序运行情况、定位程序bug。SpringBoot中推荐使用Logback日志框架。",
                        author: "huanlis",
                        times: "2019-1-18",
                        views: "99+",
                        tags: "Spring boot",
                        src: require("../assets/image/indexImage/0x01.jpg")
                    },
                    {
                        title: "SpringBoot基本配置详解",
                        introduce:
                            "SpringBoot项目有一些基本的配置，比如启动图案（banner），比如默认配置文件application.properties，以及相关的默认配置项。",
                        author: "huanlis",
                        times: "2019-5-16",
                        views: "999+",
                        tags: "Spring boot",
                        src: require("../assets/image/indexImage/7fa6ab614b4ae786147602ce4e12e3f2.jpg")
                    },
                    {
                        title: "实现分布式服务注册及简易的 Netty 聊天",
                        introduce:
                            "现在很多地方都会用到zookeeper, 用到它的地方就是为了实现分布式。用到的场景就是服务注册，比如一个集群服务器，需要知道哪些服务器在线，哪些服务器不在线。ZK有一个功能，就是创建临时节点，当机器启动应用的时候就会连接到一个ZK节点，然后创建一个临时节点，那么通过获取监听该路径，并且获取该路径下的节点数量就知道有哪些服务器在线了。当机器停止应用的时候，zk的临时节点将会自动被删除。我们通过这个机制去实现。",
                        author: "huanlis",
                        times: "2019-8-13",
                        views: "999+",
                        tags: "Netty",
                        src: require("../assets/image/indexImage/84f9d244e875ab7e26d656e0d0fda7e9.jpg")
                    },
                    {
                        title: "Spring 体系常用项目一览",
                        introduce:
                            "如今做Java尤其是web几乎是避免不了和Spring打交道了，但是Spring是这样的大而全，新鲜名词不断产生，学起来给人一种凌乱的感觉，我就在这里总结一下，理顺头绪。",
                        author: "huanlis",
                        times: "2019-11-5",
                        views: "999+",
                        tags: "Spring",
                        src: require("../assets/image/indexImage/da8069328e467dcb314261c4f35e1ebd.jpg")
                    },
                    {
                        title: "Django中关于Cookie的使用示例",
                        introduce:
                            "我们需要先了解一下什么是会话！可以把会话理解为客户端与服务器之间的一次会晤，在一次会晤中可能会包含多次请求和响应。例如你给10086打个电话，你就是客户端，而10086服务人员就是服务器了。从双方接通电话那一刻起，会话就开始了，到某一方挂断电话表示会话结束。在通话过程中，你会向10086发出多个请求，那么这多个请求都在一个会话中。",
                        author: "java知音",
                        times: "2019-6-25",
                        views: "999+",
                        tags: "Django",
                        src: require("../assets/image/indexImage/f3f7d73349c8a9ea18fbf11be1a1fcbd.jpg")
                    }
                ],
                types: [
                    {
                        title: "Java学习",
                        number: 12
                    },
                    {
                        title: "Java Web",
                        number: 12
                    },
                    {
                        title: "python基础",
                        number: 12
                    },
                    {
                        title: "嵌入式",
                        number: 12
                    },
                    {
                        title: "Spring",
                        number: 12
                    }
                ],
                tags: [
                    {
                        tags_name: "Spring",
                        tags_number: 11
                    },
                    {
                        tags_name: "Netty",
                        tags_number: 11
                    },
                    {
                        tags_name: "Java",
                        tags_number: 11
                    },
                    {
                        tags_name: "Logback",
                        tags_number: 11
                    },
                    {
                        tags_name: "python",
                        tags_number: 11
                    },
                    {
                        tags_name: "嵌入式",
                        tags_number: 11
                    },
                    {
                        tags_name: "Spring boot",
                        tags_number: 11
                    },
                    {
                        tags_name: "Django",
                        tags_number: 11
                    }
                ],
                new_title: [
                    {
                        news_name: "Spring 体系常用项目一览"
                    },
                    {
                        news_name: "实现分布式服务注册及简易的 Netty 聊天"
                    },
                    {
                        news_name: "Django中关于Cookie的使用示例"
                    },
                    {
                        news_name: "SpringBoot基本配置详解"
                    },
                    {
                        news_name: "SpringBoot日志处理之Logback"
                    }
                ]
            };
        },
        components: {
            Article,
            Bar
        }
    };
</script>

<style scoped>
</style>
